<template>
  <div class="mavonEditor">
    <mavon-editor :value="content" :navigation="nav" tableSize="4" ref="md" :toolbars="toolbars" :ishljs = "true" v-model="content"/>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  name: 'Home',
  components: {
    mavonEditor
  },
  data () {
    return {
      content: '',
      toolbars: {
        bold: true,
        italic: true,
        underline: true,
        strikethrough: true,
        table: true,
        readmodel: true,
        undo: true,
        redo: true,
        aligncenter: true,
        subfield: true,
        preview: true
      },
      markdown: {},
      nav: false
    }
  },
  mounted () {
    this.markdown = this.$refs.md.markdownIt
    // this.markdown.use(emoji)
    // this.markdown.use(markdownItLatex)
    console.log(this.markdown)
  }
}
</script>
<style lang="less">
.mavonEditor {
  margin: 0 auto;
  width: 1190px;
  height: 100%;

}
.v-note-wrapper {
    height: 100%;
  }
</style>
